<template>
  <div class="BoutiquesongList">
    <div class="main">
      <div class="span1">
        <span>精品歌单</span>
        <i class="iconfont icon-wenhao i"></i>
        <div class="loudou">
          <el-tag type="info" effect="plain" size="mini" style="" class="info" @click="getopen">
            <i class="iconfont icon-funnelloudou" style="font-size:8px;"></i>{{title}}
          </el-tag>
        </div>
      </div>
      <!-- 图片列表面板 -->
      <div class="imglist">
        <div style="display:flex;" v-for="(item,index) in BoutiquesongList" :key="item.id">
          <div>
            <img :src="item.coverImgUrl" alt="#">
            <div class="ispan">
              <i class="iconfont icon-24gl-play" style="font-size:11px;"></i>
              <span v-for="(item1,index1) in Playquantitylist" :key="index1" v-show="index==index1">{{item1}}万</span>
            </div>
          </div>
          <div>
            <div style="margin-left:10px;margin-top:30px;" class="plist">
              <p style="" class="p1">{{item.name}}</p>
              <p style="" class="p2">by&nbsp;&nbsp;{{item.creator.nickname}}</p>
              <el-tag type="danger" effect="plain" size="mini" style="font-size:5px;color:red;margin-top: 30px;opacity: 0.6;">
                <span>{{item.tag}}</span>
              </el-tag>
            </div>
          </div>
        </div>
      </div>
      <!-- 分类面板 -->
      <div class="Classification" v-show="show">
        <el-card class="box-card">
          <div class="textitem">
            <p>全部歌单</p>
          </div>
          <div style="margin-top:20px;margin-left: 10px;display: grid;grid-template-columns: auto auto auto auto auto;">
            <span v-for="item3 in SonglistlabelList" :key="item3.id" @click="getlabelList(item3.name)" :class="item3.name==title?'p':''">{{item3.name}}</span>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'BoutiquesongList',
  data() {
    return {
      show: false,
      //分类标题
      title: '全部',
      Playquantity: [],
      Playquantitylist: []
    }
  },
  computed: {
    ...mapState({
      BoutiquesongList: state => state.playlist.BoutiquesongList,
      SonglistlabelList: state => state.playlist.SonglistlabelList
    })
  },
  mounted() {
    this.$store.dispatch('getBoutiquesongList', { cat: this.$route.query.id })
    setTimeout(() => {
      let a = []
      let b = this.BoutiquesongList
      a = [].concat(
        ...b.map(val => {
          return val.playCount
        })
      )
      this.Playquantity = a
      setTimeout(() => {
        for (let i = 0; i < 51; i++) {
          if (this.Playquantity[i].toString().length < 7) {
            this.Playquantitylist.push(this.Playquantity[i].toString().slice(0, 1))
          } else if (this.Playquantity[i].toString().length < 7) {
            this.Playquantitylist.push(this.Playquantity[i].toString().slice(0, 2))
          } else if (this.Playquantity[i].toString().length < 8) {
            this.Playquantitylist.push(this.Playquantity[i].toString().slice(0, 3))
          } else if (this.Playquantity[i].toString().length < 9) {
            this.Playquantitylist.push(this.Playquantity[i].toString().slice(0, 4))
          } else if (this.Playquantity[i].toString().length < 10) {
            this.Playquantitylist.push(this.Playquantity[i].toString().slice(0, 1))
          } else if (this.Playquantity[i].toString().length < 11) {
            this.Playquantitylist.push(this.Playquantity[i].toString().slice(0, 2))
          } else if (this.Playquantity[i].toString().length < 12) {
            this.Playquantitylist.push(this.Playquantity[i].toString().slice(0, 5))
          }
        }
      }, 300)
    }, 500)
  },
  methods: {
    getopen() {
      this.$store.dispatch('getSonglistlabelList')
      this.show = !this.show
    },
    getlabelList(e) {
      this.title = e
      this.show = false
      this.$store.dispatch('getBoutiquesongList', { cat: e })
    }
  }
}
</script>

<style lang="less" scoped>
.BoutiquesongList {
  .main {
    margin-left: -100px;
    margin-top: 20px;
    .span1 {
      .loudou {
        flex: 1;
        .info {
          font-size: 5px;
          float: right;
          margin-right: 35px;
          padding: 0 15px;
          border-radius: 15px;
        }
        .info:hover {
          cursor: pointer;
          background-color: aliceblue;
        }
      }
      display: flex;
      align-items: center;
      span {
        font-size: 20px;
        font-weight: bold;
      }
      span:hover {
        cursor: default;
      }
      .i:hover {
        color: red;
        cursor: pointer;
      }
    }
    .imglist {
      display: flex;
      display: grid;
      grid-template-columns: auto auto auto;
      margin-top: 20px;
      img {
        width: 150px;
        height: 150px;
        border-radius: 5px;
      }
      .ispan {
        position: relative;
        left: 100px;
        top: -150px;
        z-index: 99;
        color: #fff;
        font-size: 10px;
      }
      .plist {
        .p1 {
          font-size: 14px;
          opacity: 0.7;
        }
        .p1:hover {
          cursor: pointer;
          opacity: 1;
        }
        .p2 {
          font-size: 12px;
          margin-top: 10px;
          opacity: 0.4;
        }
        .p2:hover {
          opacity: 0.7;
          cursor: pointer;
        }
      }
    }
    .Classification {
      position: absolute;
      z-index: 99;
      top: 175px;
      left: 965px;
      .box-card {
        width: 500px;
        .textitem {
          border-bottom: 1px solid rgb(206, 206, 206);
          margin-left: -20px;
          width: 520px;
          display: flex;

          height: 50px;
          p {
            margin-left: 30px;
          }
        }
      }
      span {
        margin-bottom: 30px;
        opacity: 0.8;
        font-size: 13px;
      }
      span:hover {
        color: red;
        cursor: pointer;
      }
      .p {
        color: red;
        font-size: 15px;
      }
    }
  }
}
</style>